<script setup lang="ts">
import type { PageTitleType } from '@/common/constants/page-title'
import { useLayoutInfo } from '@/common/composables/useLayoutInfo'
import { IconPath, PagePath } from '@/common/constants'

withDefaults(
  defineProps<{
    title: PageTitleType
    isHomeIcon: boolean
    isBackIcon: boolean
  }>()
  ,
  {
    isHomeIcon: false,
    isBackIcon: false,
  },
)

const { safeTop, navBarHeight } = useLayoutInfo()

/**
 * 返回首页
 */
const onBackHome = () => {
  uni.switchTab({
    url: PagePath.HOME,
  })
}

/**
 * 返回上一页
 */
const onBack = () => {
  uni.navigateBack()
}
</script>

<template>
  <!-- 自定义头部组件 -->
  <view
    class="nav-bar" :style="{
      paddingTop: `${safeTop}px`,
    }"
  >
    <image v-if="isHomeIcon" :src="IconPath.HOME_LIGHT" mode="scaleToFill" class="nav-bar-icon" @click="onBackHome" />
    <image v-if="isBackIcon" :src="IconPath.BACK_LIGHT" mode="scaleToFill" class="nav-bar-icon" @click="onBack" />
    <text
      class="nav-bar-title text-lg text-white font-medium" :style="{
        lineHeight: `${navBarHeight}px`,
      }"
    >
      {{ title }}
    </text>
  </view>
</template>

<style scoped lang="scss">
.nav-bar {
  padding-inline: 30rpx;
  display: flex;
  align-items: center;

  &-icon {
    width: 40rpx;
    height: 40rpx;
  }

  &-title {
    font-size: 36rpx;
    margin-left: 20rpx;
    color: $color-white;
  }

}
</style>
